<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QQ注册页面</title>
</head>

<body>
    <form>
        <img src="bg_chs.png">
        <h2>注册账号</h2>
        <p>
            <label for="name">昵称<input type="text" id="name" name="name" required pattern="^[-\w\u4E00-\u9FA5]{4,10}$" placeholder="请输入昵称" oninvalid="setCustomValidity('长度为4-10个字符')"> </label>长度为4-10个字符
        </p>
        <p>
            <label>密码<input type="password" name="password" required pattern="^[\dA-Za-z]{6,16}$" placeholder="请输入密码"
                oninvalid="setCustomValidity('长度为6-16个字符')"></label>长度为6-16个字符
        </p>
        <p>
            <label>确认密码<input type="password" name="password" required placeholder="请再次输入密码"></label>长度为6-16个字符
        </p>
        <p>
            <label>手机号码<input type="tel" name="tel" required maxlength="11" pattern="^1[3578]\d{9}$" placeholder="请输入手机号"
                oninvalid="setCustomValidity('手机号码长度为11位，以13|5|7|8开头')"></label>手机号码长度为11位，以13|5|7|8开头
        </p>
        <p>
            <label>邮箱<input type="email" name="email" required placeholder="请输入邮箱"></label>
        </p>
        <p>
            <label>年龄<input type="age" name="age" required pattern="^\d|[1-9]\d|1[0-2]\d$" placeholder="请输入年龄"></label>
        </p>
        <a href="#"><img src="btn.bmp"></a>
    </form>
</body>

</html>